<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>z2js</title>
</head>
<body>
    <canvas id="canvas" width="150" height="150"></canvas>
    <script>
        function draw() {
            const canvas = document.getElementById("canvas");
            if (canvas.getContext) {
                const ctx = canvas.getContext("2d");

                // Cubic curves example
                ctx.fillStyle = "red";
                ctx.beginPath();
                ctx.moveTo(75, 40);
                ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
                ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
                ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
                ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
                ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
                ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
                ctx.fill();
            }
        }
        draw();
    </script>
</body>
</html>